<template>
  <a-modal
    :title="formTile + '粘衬部位'"
    :visible="true"
    width="50%"
    :footer="null"
    @cancel="reset"
  >
    <div class="main">
      <a-card>
        <a-form-model
          ref="ruleForm"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          :model="form"
          :rules="rules"
        >
          <a-form-model-item
            label="编号"
            prop="code"
          >
            <a-input
              placeholder="请输入编号"
              v-model="form.code"
            />
          </a-form-model-item>
          <a-form-model-item label="压力">
            <a-input
              placeholder="请输入压力"
              v-model="form.pressure"
            />
          </a-form-model-item>
          <a-form-model-item label="温度">
            <a-input
              placeholder="请输入温度"
              v-model="form.temperature"
            />
          </a-form-model-item>
          <a-form-model-item label="时间">
            <a-input
              placeholder="请输入时间"
              v-model="form.time"
            />
          </a-form-model-item>
          <a-form-model-item label="部位">
            <a-input
              placeholder="请输入部位"
              type="textarea"
              :rows="3"
              v-model="form.part"
            />
          </a-form-model-item>

          <a-form-model-item>
            <a-row style="margin-top:10px">
              <a-col
                :span="16"
                :offset="18"
                class="info-action"
              >
                <a-button @click="reset">
                  重置
                </a-button>
                <a-button
                  :style="{ marginLeft: '8px' }"
                  type="primary"
                  @click="onSubmit"
                  :loading="loading"
                >
                  保存
                </a-button>
              </a-col>
            </a-row>
          </a-form-model-item>
        </a-form-model>
      </a-card>
    </div>

  </a-modal>
</template>
  
<script>
import { saveInterlining, updateInterlining } from '@api/rd/index'

export default {
  components: {},

  props: {
    craftDetail: {
      type: Object,
      default: null
    },
    billId: {
      type: Number,
      default: null
    }
  },

  data() {
    return {
      labelCol: { span: 5 },
      wrapperCol: { span: 16 },
      form: {
        code: '',
        pressure: '',
        temperature: '',
        time: '',
        part: ''
      },
      rules: {
        code: [{ required: true, message: '请输入编号', trigger: 'blur' }]
      },
      loading: false,
      ifEdit: false
    }
  },

  created() {
    const { craftDetail } = this.$props
    if (craftDetail) {
      this.formTile = '编辑'
      this.form = craftDetail
      this.ifEdit = true
    } else {
      this.formTile = '新增'
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo || null
    }
  },
  mounted() {},
  methods: {
    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.submit()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    reset() {
      this.$refs.ruleForm.resetFields()
      this.$emit('closecraft')
    },
    async submit() {
      this.loading = true
      var params = JSON.parse(JSON.stringify(this.form))
      params.billId = this.billId
      const { realname } = this.userInfo
      params.operator = realname
      params.seq = 0
      var paramsArr = []
      paramsArr.push(params)
      try {
        const res = this.ifEdit ? await updateInterlining('bill', params) : await saveInterlining('bill', paramsArr)
        if (res.code == 200) {
          this.$message.success(this.idEdit ? '修改粘衬部位成功！' : '新建粘衬部位成功！')
          this.reset()
        } else {
          this.$message.warning(res.msg)
        }
      } catch (error) {
        this.$message.warning('操作失败！')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>
<style scoped>
.info-action {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
}

.ml-20 {
  margin-left: 20px;
}
</style>
